<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        ul li {
            list-style: none;
            border: 1px solid black;
            margin-top: 20px;
            margin-right: 30px;
        }

        ul li img {
            height: 160px;
            width: 200px;
            display: block;
        }

        ul li p {
            font-size: 15px;
            height: 20px;
            line-height: 20px;
        }

        ul li p:nth-of-type(2) {
            text-decoration: line-through;
        }

        ul li p:nth-of-type(3) span {
            font-size: 15px;
            height: 20px;
            line-height: 20px;
            color: red;
        }
    </style>
</head>

<body>
    <button>根据价格排序</button>
    <button>根据销量排序</button>
    <button>根据评价排序</button>
    <span>从小到大</span>
    <ul>
        <!-- <li>
            <img src="../images/ip7.jpg" alt="">
            <h3>Note7005</h3>
            <p>颜色:黑色</p>
            <p>原价:3892.00</p>
            <p>现价:<span>￥998.00</span></p>
            <p>销量:8798</p>
            <p>评价:88</p>
        </li> -->
    </ul>
</body>
<script>
    let data = [{
        id: '001',
        name: 'iphone7 plugs',
        imgurl: '../images/ip7.jpg',
        price: 5899.00,
        sale: 5888.00,
        color: '土豪金',
        evaluate: 288,
        sales: 1230
    }, {
        id: '002',
        name: 'Note7',
        imgurl: '../images/note7.jpg',
        price: 3899.00,
        sale: 998.00,
        color: '黑色',
        evaluate: 289,
        sales: 439
    }, {
        id: '003',
        name: '荣耀7',
        imgurl: '../images/honor7.jpg',
        price: 1999.00,
        sale: 1899.00,
        color: '白色',
        evaluate: 438,
        sales: 908
    }, {
        id: '004',
        name: 'iphone7 plugs',
        imgurl: '../images/ip7.jpg',
        price: 5999.00,
        sale: 5808.00,
        color: '土豪金',
        evaluate: 223,
        sales: 986
    }, {
        id: '005',
        name: 'Note7',
        imgurl: '../images/note7.jpg',
        price: 3892.00,
        sale: 998.00,
        color: '黑色',
        evaluate: 88,
        sales: 8798
    }, {
        id: '006',
        name: '荣耀7',
        imgurl: '../images/honor7.jpg',
        price: 1929.00,
        sale: 1099.00,
        color: '白色',
        evaluate: 2088,
        sales: 453
    }, {
        id: '007',
        name: 'iphone7 plugs',
        imgurl: '../images/ip7.jpg',
        price: 4899.00,
        sale: 2888.00,
        color: '土豪金',
        evaluate: 2880,
        sales: 88
    }, {
        id: '008',
        name: 'Note7',
        imgurl: '../images/note7.jpg',
        price: 5876.00,
        sale: 998.00,
        color: '黑色',
        evaluate: 3288,
        sales: 99
    }, {
        id: '009',
        name: '荣耀7',
        imgurl: '../images/honor7.jpg',
        price: 4999.00,
        sale: 1899.00,
        color: '白色',
        evaluate: 1288,
        sales: 645
    }, {
        id: '010',
        name: 'iphone7 plugs',
        imgurl: '../images/ip7.jpg',
        price: 5888.00,
        sale: 2899.00,
        color: '土豪金',
        evaluate: 2288,
        sales: 34
    }, {
        id: '011',
        name: 'Note7',
        imgurl: '../images/note7.jpg',
        price: 3299.00,
        sale: 978.00,
        color: '黑色',
        evaluate: 28,
        sales: 1213
    }, {
        id: '012',
        name: '荣耀7',
        imgurl: '../images/honor7.jpg',
        price: 1976.00,
        sale: 1899.00,
        color: '白色',
        evaluate: 3243,
        sales: 123
    }];


    let ul = document.querySelector('ul');
    let btnPrice = document.querySelectorAll('button')[0];
    let btnSales = document.querySelectorAll('button')[1];
    let btnEval = document.querySelectorAll('button')[2];




    let htmlStr = '';
    function show() {
        for (let i = 0; i < data.length; i++) {
            htmlStr += `<li>
                            <img src="${data[i].imgurl}" alt="">
                            <h3>${data[i].name}</h3>
                            <p>颜色:${data[i].color}</p>
                            <p>原价:${data[i].price}</p>
                            <p>现价:<span>￥${data[i].sale}</span></p>
                            <p>销量:${data[i].sales}</p>
                            <p>评价:${data[i].evaluate}</p>
                        </li>`
        }
        ul.innerHTML = htmlStr;
        htmlStr = '';
    }
    show();

    //根据价格排序
    btnPrice.addEventListener('click', () => {
        data.sort((n1, n2) => n1.sale - n2.sale);
        show();
    })

    //根据销量排序
    btnSales.addEventListener('click', () => {
        data.sort((n1, n2) => n1.sales - n2.sales);
        show();
    })

    //根据评价排序
    btnEval.addEventListener('click', () => {
        data.sort((n1, n2) => n1.evaluate - n2.evaluate);
        show();
    })
</script>

</html>